<template>
	<view class="budget-quota-list" :style="backPicture">
		<view class="header">
			<wd-navbar title="商品详情" left-arrow @click-left="handleClickLeft"></wd-navbar>
			<view class="messagt_card">
				<view class="messagt_card_price">
					<view class="messagt_card_text">
						单价
					</view>
					<view class="messagt_card_texttwo">
						¥{{baseData.projectVal ||0}}
					</view>
					<view class="messagt_card_textthree" style="margin-right: 16rpx;">
						/{{baseData.shop_unit || '件'}}
					</view>
					<view class="messagt_card_textthree">
						总价：¥{{baseData.unitTotalMoney}}/{{baseData.mainCostMoney}}{{baseData.shop_unit || '件'}}
					</view>

				</view>
				<view class="messagt_card_center">
					{{baseData.quotaName}}
				</view>
				<view class="messagt_card_down" v-if="remark!==null&&remark!==''">
					<view class=" messagt_card_remark">
						备注：
					</view>
					<view class="messagt_card_remarktext">
						<rich-text :nodes="remark"></rich-text>
					</view>
				</view>
			</view>
			<view class="shop_detail">
				<image style="height: 12rpx; width: 125rpx" src="@/static/image/shopleft.png"></image>
				<view class="shop_detail_text">
					商品详情
				</view>
				<image style="height: 12rpx; width: 125rpx" src="@/static/image/shopright.png"></image>
			</view>
		</view>
		<view class="shop_detail_picture">
			<rich-text :nodes="richTextContent"></rich-text>
			<image style="height: 160px; width: 200px;" src="@/static/image/noData.png"
				v-if="richTextContent.length==0"></image>

		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from "vue";
	import {
		onLoad,
		onUnload
	} from "@dcloudio/uni-app";
	import {
		getProductDetail
	} from "@/api/budgetQuota";
	const richTextContent = ref('')
	const backPicture = ref('')
	const baseData = ref({})
	const shopDataresult = ref({})
	const remark = ref()
	onLoad((options) => {
		// 从路由参数获取动态标题
		const decodedData = JSON.parse(decodeURIComponent(options.data));
		const dynamicTitle = decodedData.spaceQuotatitle || "默认标题";
		uni.setNavigationBarTitle({
			title: dynamicTitle,
		});
		baseData.value = decodedData
		remark.value = decodedData.remark?.replace(/<(?!(\/)?p\b)[^>]*>/gi, '');
		getShopdetail(baseData.value.contentId)
	});

	const handleClickLeft = () => {
		uni.navigateBack();
	};
	const getShopdetail = async (contentId) => {
		let obj = {
			// collectId: '1876877788611477504'
			contentId: contentId
		}
		const {
			data
		} = await getProductDetail(obj)
		shopDataresult.value = data
		const content = data.content?.replace(/<img\b([^>]*?)\bstyle=["']([^"']*)["']/gi, (match, p1, p2) => {
			return `<img${p1}style="${p2}; width: 100%; height: auto;"`;
		});
		richTextContent.value = content
		// richTextContent.value =
		// 	`<p><img src="https://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/mall/2024-07-30/b11722329743631.png" 
		// 	alt="" data-href="" style="width: 100%;height: auto;" /></p>`
		getDetailData()
	}

	const getDetailData = () => {
		const firstpict = shopDataresult.value.mainPicUrl
		backPicture.value =
			`background: url(${firstpict}) no-repeat;background-size: cover;height: 750rpx;width: 100vw;`
	}
	const changeimg = (v) => {
		console.log(v);
	}
	const handleClick = (e) => {
		console.log(e);

	}
	onUnload(() => {
		uni.setStorage({
			key: 'yourKey',
			data: 'yourData',
		});
	})
</script>

<style lang="scss" scoped>
	@import "index";
</style>